<template>
    <div class="app1">
        <!-- 搜索 -->
        <el-form inline :model="sou">
            <el-input label="搜索名称" props="searchValue" placeholder="请输入内容" v-model="sou.searchValue"
                style="width: 300px;" />
            <el-button type="primary" @click="getSearch">查询</el-button>
        </el-form>

        <!-- 渲染 -->
        <el-table :data="TableData.data">
            <el-table-column prop="id" label="id" width="180" />
            <el-table-column label="shopImage" prop="shopImage">
                <template #default="scope">
                    <el-avatar :src="scope.row.shopImage" height="40" />
                </template>
            </el-table-column>
            <el-table-column prop="shopAddress" label="shopAddress" width="180" />
            <el-table-column prop="shopType" label="shopType" />
            <el-table-column prop="shopName" label="shopName"/>
            <el-table-column prop="action" label="action">
                <template #default="{ row }">
                    <el-button @click="info(row)">详情</el-button>
                    <el-button @click="emit(row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 编辑 -->
        <el-dialog v-model="show" title="编辑" width="800">
            <el-form :v-model="show">
                <el-form-item label="username" props="username">
                    <el-input v-model="forData.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="nickname" props="nickname">
                    <el-input v-model="forData.nickname" placeholder="请输入昵称"></el-input>
                </el-form-item>
                <el-form-item label="avatar" props="avatar">
                    <el-input v-model="forData.avatar" placeholder="请输入头像路径"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" plain @click="ChanegEmit">
                        确定
                    </el-button>
                    <el-button @click="show = false" type="danger" plain>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 详情 -->
        <el-dialog v-model="showDetail" title="详情">
            <el-form>
                <p>
                    <b>id:</b> {{ forData.id }}
                </p>
                <p>
                    <b>role:</b>{{ forData.role }}
                </p>
                <p>
                    <b>username:</b>{{ forData.username }}
                </p>
                <p>
                    <b>nickname:</b>{{ forData.nickname }}
                </p>
                <p>
                    <el-button type="success" plain>
                        确定
                    </el-button>
                    <el-button @click="showDetail = false" type="danger" plain>取消</el-button>
                </p>
            </el-form>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import axios from 'axios'
const TableData = reactive({
    data: [],
})

const GetList = async () => {
    const res = await axios.get('/api/list')
    console.log(res.data)
    const { data } = res.data.data
    TableData.data = data
    console.log(TableData.data);
}
GetList()

// 编辑
const forData = ref({
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    username: '',
    role: '',
    nickname: '',
})
const show = ref(false)
const index = ref(true)
const emit = (row) => {
    show.value = true
    index.value = false
    forData.value = row
}
const ChanegEmit = async () => {
    if (index.value) {
        await axios.put('/api/list', forData.value)
        console.log('添加');
    }
    else {
        await axios.post('/api/list', forData.value)
        console.log('编辑');
    }
    show.value = false
    await GetList()
}

// 详情
const showDetail = ref(false)
const info = (row) => {
    showDetail.value = true
    forData.value = row
}

// 搜索
const sou = ref({
    searchValue: '',
    tyle: ''
})
const getSearch = () => {
    console.log(typeof sou.value.searchValue);
    axios.get('/api/list?searchValue=' + sou.value.searchValue).then(res => {
        TableData.data=res.data.data.data

    })
}
</script>
<style scoped></style>